<template>
    <div class="pl-16px pr-16px pt-16px pb-16px h-350px overflow-hidden" v-loading="state.loading">
        <el-scrollbar :always="true">
            <el-checkbox-group v-model="selectedKeywords">
                <el-checkbox :value="keyword.label" v-for="(keyword, index) in keywords" :key="index">
                    <div class="custom-input" :class="{ 'active': keyword.customize }">
                        <div class="flex items-center" v-if="keyword.customize">
                            <el-input v-model="keyword.label" @input="handleInput(keyword, index)"></el-input>
                            <el-button type="danger" :icon="Delete" @click="handleDelete(keyword, index)"
                                class="ml-8px"></el-button>
                        </div>
                        <p v-else>{{ keyword.label }}</p>
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { validateStringAllErrors } from '@/utils/index'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { Delete, WarningFilled } from '@element-plus/icons-vue'

const props = defineProps<{
    words: any;
    ruleForm: any;
    index: number
}>()

const state = reactive({
    loading: false,
    keyIndex: <number[]>[],
})

const emits = defineEmits(['changeWords'])

const keywords = computed(() => {
    if (props.words) {
        return props.words.list
    }
})

const selectedKeywords = ref<string[]>([]);

function handleInput(value: any, index: number) {
    //检测字符串字符串不能为空、字符串不能包含“医用”、“医疗器械”、“手术器械”、字符串不能超过100字、字符串不能含有特殊字符 
    const result = validateStringAllErrors(value.label)
    if (Array.isArray(result) && result.length > 0) {
        ElMessage.error(result[0])
    }
    if (value.label.length > 0) {
        props.words.list[index].label = value.label
        selectedKeywords.value.push(value.label)
    }
}
function handleDelete(value: any, index: number) {
    confirmMessageBox(WarningFilled, '您确定要删除这条前置词吗？', '', '', () => {
        const labelToRemove = keywords.value[index].label
        // 1. 从 selectedKeywords 移除
        selectedKeywords.value = selectedKeywords.value.filter(item => item !== labelToRemove)
        // 2. 从 frontWords 数组中移除对应对象
        props.words.list.splice(index, 1)
    })
}

watch(() => props.index, () => {
    //切换词时候重新获取选中的词
    updateSelectedKeywords(props.words.list)
}, { immediate: true, deep: true })

watch(() => props.words, (newVal) => {
    updateSelectedKeywords(newVal.list)
    emits('changeWords', props.words)
}, { immediate: true, deep: true })

watch(() => selectedKeywords.value, (newVal) => {
    // 遍历props.words.list中的每一项
    props.words.list.forEach((item:any) => {
        // 检查当前项的label是否在selectedKeywords.value中
        if (newVal.includes(item.label)) {
            // 如果找到匹配项，将value设为1
            item.value = 1;
        } else {
            // 如果未找到匹配项，将value设为0
            item.value = 0;
        }
    });
})

function updateSelectedKeywords(array:any[]){
    selectedKeywords.value = array
        .filter((item: any) => item.value === 1)
        .map((item: any) => item.label);
}
</script>

<style lang="scss" scoped>
:deep(.el-checkbox-group) {
    display: block !important;
}

:deep(.el-checkbox__label) {
    width: 90%;
}

:deep(.el-checkbox) {
    margin-right: 0 !important;
    width: 50%;
}

:deep(.el-input) {
    height: 28px;
}

:deep(.el-button--danger) {
    height: 28px;
    padding-left: 8px;
    padding-right: 8px;
}
</style>